/**
 * <pre>
 *     author : XML
 *     e-mail : 946891360@qq.com
 *     time   : 2019/07/04
 *     version:
 *     desc   :
 * </pre>
 */
import React, {Component} from 'react'
import {Text, Platform, View, StatusBar, StyleSheet, ViewPropTypes} from 'react-native'
import PropType from 'prop-types'

const NAV_BAR_HEIGHT_IOS = 44;//导航栏在ios中的高度
const NAV_BAR_HEIGHT_ANDROID = 50;//导航栏在android中的高度
const STATUS_BAR_HEIGHT = 20;//状态栏的高度

const StatusBarShape = {//设置状态栏所接受的属性
    barStyle: PropType.oneOf(['light-content', 'default']),
    hidden: PropType.bool,
    backgroundColor: PropType.string,
};
export default class NavigationBar extends Component {
    //提供属性的类型检查
    static propTypes = {
        style: ViewPropTypes.style,
        title: PropType.string,
        titleView: PropType.element,
        titleLayoutStyle: ViewPropTypes.style,
        hide: PropType.bool,
        statusBar: PropType.shape(StatusBarShape),
        rightButton: PropType.element,
        leftButton: PropType.element,
    };
    //设置默认属性
    static defaultProps = {
        statusBar: {
            barStyle: 'light-content',
            hidden: false
        }
    };

    render() {
        let statusBar = this.props.statusBar.hidden ?
            <View style={styles.statusBar}>
                <StatusBar {...this.props.statusBar}/>
            </View> : null;
        let titleView = this.props.titleView ? this.props.titleView :
            <Text ellipsizeMode='head' numberOfLines={1} style={styles.title}>{this.props.title}</Text>
        let content = this.props.hide ? null :
            <View style={styles.navBar}>
                {this.getButtonElement(this.props.leftButton)}
                <View style={[styles.navBarTitleContainer, this.props.titleLayoutStyle]}>
                    {titleView}
                </View>
                {this.getButtonElement(this.props.rightButton)}
            </View>;
        return (
            <View style={[styles.container, this.props.style]}>
                {statusBar}
                {content}
            </View>
        )
    }

    /**
     * 获取左右按钮
     * @param data
     * @returns {*}
     */
    getButtonElement(data) {
        return (
            <View style={styles.navBarButton}>
                {data ? data : null}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    navBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,

    },
    navBarButton: {
        alignItems: 'center'
    },
    navBarTitleContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        left: 40,
        right: 40,
        top: 0,
        bottom: 0
    },
    container: {
        backgroundColor: '#2196f3'
    },
    title: {
        fontSize: 20,
        color: 'white',
    },
    statusBar: {
        height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0
    },
});